<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="./index.css" />
  <script src="https://unpkg.com/pinyin-pro@3.12.0/dist/index.js"></script>
  <title>css动画--写代码的浩</title>
</head>
<body>
  <div>
    <span>
      <span>使用ruby显示拼音: </span>
      <ruby>写代码的浩<rp>(</rp><rt>xiědàimǎdehào</rt><rp>)</rp></ruby>
    </span>

    <br /><br /><br />
    <span>
      <span>通过空格隔开拼音: </span>
      <ruby>写代码的浩<rp>(</rp><rt>xiě dài mǎ de hào</rt><rp>)</rp></ruby>
    </span>

    <br /><br /><br />
    <span>
      <span>每一个字单独ruby: </span>
      <ruby>写<rp>(</rp><rt>xiě</rt><rp>)</rp></ruby>
      <ruby>代<rp>(</rp><rt>dài</rt><rp>)</rp></ruby>
      <ruby>码<rp>(</rp><rt>mǎ</rt><rp>)</rp></ruby>
      <ruby>的<rp>(</rp><rt>de</rt><rp>)</rp></ruby>
      <ruby>浩<rp>(</rp><rt>hào</rt><rp>)</rp></ruby>
    </span>

    <br /><br /><br />
    <span id="gzh" class="rubyContainer">
      <span>根据文字输出拼音: </span>
    </span>

    <br /><br /><br />
    <input id="input"/><br />
    <div>
      <span>对输入文字添加拼音: </span>
      <span id="pinyinRes" class="rubyContainer"></span>
    </div>
  </div>
  <script src="./index.js"></script>
</body>
</html>
